<template>
    <ui-main no-padding title="图片画廊">
        <div class="item one p-20">
            <div class="ui scrollbar" style="height:200px">
                <el-upload class="upload-demo"
                    action="https://www.wangdahu.net/api/index.php?g=asset&m=asset&a=plupload"
                    :on-remove="handleRemove"
                    :on-change="handleChange"
                    multiple
                    :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </div>
            <div class="ui divider"></div>
            <el-button type="success" plain @click="$bui.viewer({list:fileList})">查看图片组</el-button>
        </div>
        <div class="item two">
            <ui-load-md file="viewer.md"></ui-load-md>
        </div>
    </ui-main>
</template>
<script>
    export default {
        data() {
            return {
                // fileList是存放图片列表的数组,url为图片地址,uid用于区分索引,name为图片名
                fileList: [{
                    url: '/static/logo.png',
                    uid: '000',
                    name:'测试文件1'
                },{
                    url: 'https://th.bing.com/th/id/R.466bb61cd7cf4e8b7d9cdf645add1d6e?rik=YRZKRLNWLutoZA&riu=http%3a%2f%2f222.186.12.239%3a10010%2fwmxs_161205%2f002.jpg&ehk=WEy01YhyfNzzQNe1oIqxwgbTnzY7dMfmZZHkqpZB5WI%3d&risl=&pid=ImgRaw&r=0',
                    uid: '001',
                    name:'测试文件2'
                },{
                    url: 'https://th.bing.com/th/id/R.d8dfd08893b58d08d74b38ad8870a48d?rik=9KBqff6Rai035Q&riu=http%3a%2f%2fstatic.cntonan.com%2fuploadfile%2f2019%2f0214%2f20190214104244pwm1xxsdikh.jpg&ehk=MOxI2n5nY44gO%2fKsNYWAuEBvcRwSmkRVNb4dTS6Gk%2bY%3d&risl=&pid=ImgRaw&r=0',
                    uid: '002',
                    name:'测试文件3'
                }]
            }
        },
        methods: {
            handleRemove(file, fileList) {
                // 上传组件删除,更新图片列表
                this.fileList = fileList
            },
            handleChange(file,fileList){
                // 上传组件改变(添加文件、上传成功和上传失败时都会被调用),更新图片列表
                this.fileList = fileList
            },
        }
    }

</script>
